Dynamic Routes
Dynamic Segment
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
パスパラメータを持つ Route
フォルダ名に [ ] を含めることで、パスパラメータに応じた画面を提供できる
以下の 3 つの種類がある
[slug]: layout.tsx や page.tsx でパスパラメータを文字列として取得できる
e.g. app/blog/[slug]/page.tsx の場合
table:_
URL リクエスト params
/blog/a { slug: 'a' }
/blog/b { slug: 'b' }
/blog/c { slug: 'c' }
[..slug]: ネストしたパスに対応し、すべてのパスパラメータを配列として取得できる
Catch-all Segment
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments
e.g. app/blog/[[slug]]/page.tsx の場合
table:_
URL リクエスト params
/blog/a { slug: ['a'] }
/blog/a/b { slug: ['a'. 'b'] }
/blog/a/b/c { slug: ['a', 'b', 'c']] }
バッククォート は [ ] を表示するためのエスケープ radish-miyazaki.icon
[[...slug]]: [...slug] と似ているが、ネストしていないパターンにも対応できる
Optional Catch-all Segment
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments
e.g. app/blog/[[...slug]]/page.tsx の場合
table:_
URL リクエスト params
/blog {}
/blog/a { slug: ['a'] }
/blog/a/b { slug: ['a'. 'b'] }
/blog/a/b/c { slug: ['a', 'b', 'c']] }
パスに影響を与えることなく、グルーピングしたい場合: Route Groupes
#Next.js #App_Router